﻿@{
    ViewBag.Title = "栅格系统";
}
<h1>栅格系统</h1>
<style>
    .row {
        margin-bottom: 20px;
    }

        .row .row {
            margin-top: 10px;
            margin-bottom: 0px;
        }

    [class*="col-"] {
        padding-top: 15px;
        padding-bottom: 15px;
        background-color: #eeeeee;
        background-color: rgba(86,61,124,.15);
        border: 1px solid#dddddd;
        border: 1px solid rgba(86,61,124,.2);
    }
</style>

<div class="row">
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
    <div class="col-xs-6 col-md-8">.col-md-8</div>
    <div class="col-xs-6 col-md-4">.col-md-4</div>
</div>
<div class="row">
    <div class="col-md-6">.col-md-6</div>
    <div class="col-md-6">.col-md-6</div>
</div>
<div class="row">
    <div class="col-md-12">.col-md-12</div>
</div>
<div class="row">
    <div class="col-md-4 col-md-offset-8"></div>
</div>
<div class="row">
    <div class="col-md-9">
        col-md-9
        <div class="row">
            <div class="col-md-8 col-md-offset-4">
                col-md-8
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-9">col-md-9</div>
    <div class="col-md-3">col-md-3</div>
</div>
<div class="row">
    <div class="col-md-9 col-md-push-3">col-md-9</div>
    <div class="col-md-3 col-md-pull-9">col-md-3</div>
</div>

